<template>
	<view class="content">

		<view class="header">
			<view style="font-weight: 500;font-size: 22px;color: #FFFFFF;line-height: 26px;">
				答题
			</view>
		</view>
		<view class="center">
			<view class="bg" style="position: relative;">
			</view>
			<view v-if="begin" class="one" style="position: absolute;top: 10%;
				left:50%;
				transform:translateX(-50%);">
				<view style="width: 300px;height:300px;border-radius: 50%;">
					<view class="container-wrap">
						<view class="container">
							<view class="more"></view>
							<view class="more"></view>
							<view class="more"></view>
							<view class="more"></view>
							<view class="item">
								<!-- 	<view style="width: 100px;height:100px;border-radius: 50%;background: #BBBBBB;">
													
																
												</view> -->
							</view>
						</view>
					</view>

				</view>
			</view>

			<view v-else class="one" style="position: absolute;top: 10%;
				left:50%;
				transform:translateX(-50%);">
				<view style="width: 300px;height:300px;border-radius: 50%;background: #BBBBBB;">


				</view>
			</view>


			<view v-if="begin" class="two"
				style="position: absolute;top: 60%;display: flex;width: 90%;align-items: center;padding: 0 5%;">
				<view style="background: linear-gradient(90deg, #FF4EF5, #10A2FF);width: 30%;height: 4px;">

				</view>
				<view id="container">
					<view id="one" class="wave"></view>
					<view id="two" class="wave"></view>
					<view id="three" class="wave"></view>
					<view id="four" class="wave"></view>
					<view id="five" class="wave"></view>
					<view id="six" class="wave"></view>
					<view id="seven" class="wave"></view>
					<view id="eight" class="wave"></view>
					<view id="nine" class="wave"></view>
					<view id="ten" class="wave"></view>
				</view>


				<view style="background: linear-gradient(90deg, #FF4EF5, #10A2FF);width: 30%;height: 4px;">

				</view>

			</view>
			<view v-else class="two2"
				style="position: absolute;top: 60%;display: flex;width: 90%;align-items: center;padding: 0 5%;">
				<view style="background: linear-gradient(90deg, #FF4EF5, #10A2FF);width: 30%;height: 4px;">

				</view>
				<view id="container">
					<view id="one" class="wave"></view>
					<view id="two" class="wave"></view>
					<view id="three" class="wave"></view>
					<view id="four" class="wave"></view>
					<view id="five" class="wave"></view>
					<view id="six" class="wave"></view>
					<view id="seven" class="wave"></view>
					<view id="eight" class="wave"></view>
					<view id="nine" class="wave"></view>
					<view id="ten" class="wave"></view>
				</view>


				<view style="background: linear-gradient(90deg, #FF4EF5, #10A2FF);width: 30%;height: 4px;">

				</view>

			</view>

			<view class="three"
				style="position: absolute;top: 80%;width: 90%;display: flex;justify-content: space-between;padding: 0 5%;">
				<view @tap="startRecord"
					style="width: 40%;height: 52px;background: linear-gradient(90deg, #FF4EF5, #10A2FF);border-radius: 36px;font-weight: 500;font-size: 22px;color: #FFFFFF;line-height: 52px;text-align: center;">
					开始答题
				</view>
				<view @tap="endRecord"
					style="width: 40%;height: 52px;background: #FF4C4C;border-radius: 36px;font-weight: 500;font-size: 22px;color: #FFFFFF;line-height: 52px;text-align: center;">
					结束答题</view>
			</view>
		</view>

		<view class="foot">

		</view>

	</view>

	<view>
		<!-- 	<button @tap="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button> -->
		<!-- <button @tap="playVoice">播放录音</button> -->
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();

	innerAudioContext.autoplay = true;
	import {
		uploadAvatar,
		record
	} from '../../api/index.js';

	import useLayOutSettingStore from '@/store/counter.js'
	let userStore = useLayOutSettingStore()
	export default {



		data() {
			return {
				text: 'uni-app',
				voicePath: '',
				begin: false,
				index: 1
			}
		},
	 
		onLoad() {

			if (wx.setScreenBrightness) {
				// 保持屏幕常亮 true / false
				wx.setKeepScreenOn({
					keepScreenOn: true
				});
			} else {
				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
				wx.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
			}

			let self = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;

				uploadAvatar(self.voicePath).then(uploadedUrl => {
					console.log('ok:', JSON.parse(uploadedUrl));
					let data1 = JSON.parse(uploadedUrl)
					record({
						audioFilePath: data1.data.url,
						"interviewId": userStore.interviewId,
						"answerIndex": self.index
					}).then(res => {
						self.index += 1;
					}).then(res => {
						if (self.index === 8) {
							uni.navigateTo({
								url: '/pages/complete/complete'
							})
						}
					})
				}).catch(error => {
					console.error('上传失败:', error);
				});

			});
		},
		methods: {
			startRecord() {
				console.log('开始录音');
				var options = {
					duration: 600000,
				};
				recorderManager.start(options);
				this.begin = true
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
				this.begin = false
			},
			playVoice() {
				console.log('播放录音');

				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			}
		}
	}
</script>
<style lang="less">
	.content {
		position: relative;
		background: #E4E4FF;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.header {
			text-align: center;
			padding: 10px;
			background: url(https://aiinterview-1322700550.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E5%9B%BE%E5%B1%82%203%402x.png) no-repeat;
			background-size: cover;
			height: 40%;
		}

		.center {
			position: absolute;
			top: 5%;
			height: 90%;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			background: #FFFFFF;
			border-radius: 20px;

			.bg {
				background: url(https://aiinterview-1322700550.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E5%9B%BE%E5%B1%82%205.png) no-repeat;
				background-size: cover;
				height: 100%;
				transform: rotate(180deg);
			}

			.one {

				.container-wrap {
					// width: 100%;
					// height: 1000px;
					// display: block;
					// margin: 50px auto 0 auto;
					// overflow: hidden;
				}

				.container {
					// position: relative;
					// width: 300px;
					// height: 300px;
					// margin: 0 auto;
					// border-radius: 50%;
					// margin-top: 200px;
				}

				.container .more {
					position: absolute;
					opacity: 1;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 150px;
					height: 150px;
					border-radius: 50%;
					border: 1px solid #6c50d7;
					;
					animation: routerView 4s linear 0s infinite;
				}

				.container .more::after {
					content: "";
					position: absolute;
					top: -4px;
					left: 50%;
					width: 6px;
					height: 6px;
					overflow: hidden;
					border-radius: 5px;
					background-color: orangered;
				}

				.container .more:nth-child(2) {
					animation-delay: 1s;
				}

				.container .more:nth-child(3) {
					animation-delay: 2s;
				}

				.container .more:nth-child(4) {
					animation-delay: 3s;
				}

				.item {
					width: 300px;
					height: 300px;
					border-radius: 50%;
					overflow: hidden;
				}

				.item img {
					width: 100%;
					height: 100%;
					animation: rotation 12s linear infinite;
				}

				@keyframes rotation {
					from {
						transform: rotate(0deg);
					}

					to {
						transform: rotate(360deg);
					}
				}

				@keyframes routerView {
					0% {
						opacity: 1;
						transform: rotate(0deg) scale(1);
					}

					25% {
						opacity: 0.75;
						transform: rotate(72deg) scale(1.25);
					}

					50% {
						opacity: 0.5;
						transform: rotate(144deg) scale(1.5);
					}

					75% {
						opacity: 0.25;
						transform: rotate(216deg) scale(1.75);
					}

					100% {
						opacity: 0;
						transform: rotate(360deg) scale(2);
					}
				}

			}

			.two {

				@keyframes yuying1 {
					0% {
						height: 10%;
					}

					20% {
						height: 50%;
					}

					50% {
						height: 100%;
					}

					80% {
						height: 50%;
					}

					100% {
						height: 0%;
					}
				}

				#container {
					width: 200px;
					height: 50px;
					// margin: 200px auto;	
				}

				#container #one {
					animation: yuying1 0.6s infinite 0.1s;
					-webkit-animation: yuying1 1.2s infinite 0.1s;
				}

				#container #two {
					animation: yuying1 0.6s infinite 0.3s;
					-webkit-animation: yuying1 1.2s infinite 0.3s;
				}

				#container #three {
					animation: yuying1 0.6s infinite 0.5s;
					-webkit-animation: yuying1 1.2s infinite 0.5s;
				}

				#container #four {
					animation: yuying1 0.6s infinite 0.7s;
					-webkit-animation: yuying1 1.2s infinite 0.7s;
				}

				#container #five {
					animation: yuying1 0.6s infinite 0.9s;
					-webkit-animation: yuying1 1.2s infinite 0.9s;
				}

				#container #six {
					animation: yuying1 0.6s infinite 1.1s;
					-webkit-animation: yuying1 1.2s infinite 1.1s;
				}

				#container #seven {
					animation: yuying1 0.6s infinite 1.3s;
					-webkit-animation: yuying1 1.2s infinite 1.3s;
				}

				#container #eight {
					animation: yuying1 0.6s infinite 1.5s;
					-webkit-animation: yuying1 1.2s infinite 1.5s;
				}

				#container #nine {
					animation: yuying1 0.6s infinite 1.7s;
					-webkit-animation: yuying1 1.2s infinite 1.7s;
				}

				#container #ten {
					animation: yuying1 0.6s infinite 1.9s;
					-webkit-animation: yuying1 1.2s infinite 1.9s;
				}

				.wave {
					width: 6px;
					height: 100%;
					margin-left: 10px;
					border-radius: 50px;
					background: linear-gradient(90deg, #FF4EF5, #10A2FF);
					vertical-align: middle;
					display: inline-block;
				}

			}

			.two2 {

				@keyframes yuying1 {
					0% {
						height: 10%;
					}

					20% {
						height: 50%;
					}

					50% {
						height: 100%;
					}

					80% {
						height: 50%;
					}

					100% {
						height: 0%;
					}
				}

				#container {
					width: 200px;
					height: 50px;
					// margin: 200px auto;	
				}

				// #container #one{
				// 	animation:yuying1 0.6s infinite 0.1s;
				//    -webkit-animation:yuying1 1.2s infinite 0.1s;
				// }
				// #container #two{
				// 	animation:yuying1 0.6s infinite 0.3s;
				//    -webkit-animation:yuying1 1.2s infinite 0.3s;
				// }
				// #container #three{
				// 	animation:yuying1 0.6s infinite 0.5s;
				//    -webkit-animation:yuying1 1.2s infinite 0.5s;
				// }
				// #container #four{
				// 	animation:yuying1 0.6s infinite 0.7s;
				//    -webkit-animation:yuying1 1.2s infinite 0.7s;
				// }
				// #container #five{
				// 	animation:yuying1 0.6s infinite 0.9s;
				//    -webkit-animation:yuying1 1.2s infinite 0.9s;
				// }
				//          #container #six{
				// 	animation:yuying1 0.6s infinite 1.1s;
				//    -webkit-animation:yuying1 1.2s infinite 1.1s;
				// }
				//          #container #seven{
				// 	animation:yuying1 0.6s infinite 1.3s;
				//    -webkit-animation:yuying1 1.2s infinite 1.3s;
				// }
				// #container #eight{
				// 	animation:yuying1 0.6s infinite 1.5s;
				//    -webkit-animation:yuying1 1.2s infinite 1.5s;
				// }
				//          #container #nine{
				// 	animation:yuying1 0.6s infinite 1.7s;
				//    -webkit-animation:yuying1 1.2s infinite 1.7s;
				// }
				//          #container #ten{
				// 	animation:yuying1 0.6s infinite 1.9s;
				//    -webkit-animation:yuying1 1.2s infinite 1.9s;
				// }

				.wave {
					width: 6px;
					height: 100%;
					margin-left: 10px;
					border-radius: 50px;
					background: linear-gradient(90deg, #FF4EF5, #10A2FF);
					vertical-align: middle;
					display: inline-block;
				}

			}
		}

		.foot {
			background: url(https://aiinterview-1322700550.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E5%9B%BE%E5%B1%82%205.png) no-repeat;
			background-size: cover;
			height: 40%;
		}


	}
</style>